<template>
  <div class="lineColumnContent">
    <div ref="lineColumnBar" style="width: 900px; height: 500px"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.setZoomBarOption();
  },
  methods: {
    setZoomBarOption() {
      var myChartDom = this.$refs.lineColumnBar;
      var myChart = this.$echarts.init(myChartDom);
      const option = {
        color: ['blue','green'], // 
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                lineStyle: { 
                    color: '#dddddd',
                    width: 1,
                    type: 'dashed'
                },
                crossStyle: {
                    color: '#000'
                }
            }
        },
        xAxis: [
            {
            type: 'category',
            data: ['常规考点', '封管控考点', '集中医学观察点', '医疗救治点', '考生集中酒店', '考生集中小区', '中高考应急指挥点'],
            axisPointer: {
                type: 'shadow'
            },
             axisTick: { // 刻度
              show: false,
            },
            }
        ],
        yAxis: [
            {
            type: 'value',
            name: '',
            min: 0,
            max: 3000, // 最大值
            interval: 600, // 间隔
            axisLabel: {
                formatter: '{value}'  // 刻度
            },
            axisLine: {
              show: false, // 隐藏y轴线
              lineStyle: {
                color: "#006AD6",
              },
            },
            axisTick: { // 刻度
              show: false,
            },
            },
            {
            type: 'value',
            name: '',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
                formatter: ''
            },
            axisLine: {
              show: false, // 隐藏y轴线
              lineStyle: {
                color: "#006AD6",
              },
            },
            axisTick: { // 刻度
              show: false,
            },
            }
        ],
        series: [
            {
            name: 'Evaporation',
            type: 'bar',
            itemStyle: {
                normal: {
                  show: true,
                  color: '#8996E6',
                //   barBorderRadius: 70,
                //   borderWidth: 0,
                //   borderColor: "#333",
                },
              },
            tooltip: {
                valueFormatter: function (value) {
                return value + ' ml';
                }
            },
            data: [
                300, 600,200,800,1300,1500,2000,2500
            ]
            },
            {
            name: 'four',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2,
                show: true,
                  color: 'green',
              },
            },
            tooltip: {
                valueFormatter: function (value) {
                return value + '个';
                }
            },
            data: [40,50,60,20,70,80,10]
            }
        ]
        };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.lineColumnContent{
  width: 900px;
  margin: 50px auto;
}
</style>